import React, { Component } from "react";
import { connect } from "dva";
import moment from "moment";
import _ from "lodash";
import {
  Form,
  Input,
  Timeline,
  Row,
  Button,
  Checkbox,
  Icon,
  Table,
  InputNumber,
  TimePicker,
  Modal,
  message
} from "antd";
import Drawer from "../../components/Pro/drawer/drawer";

import "./ThiftManagement.less";
import {
  taskComShiftDelete, //班次管理-班次删除并删除班次的考勤时间安排
  taskComShiftPage, //获取班次分页查询
  taskComShiftGet, //根据id获取班次
  taskComShiftInsert, //添加班次
  taskComShiftUpdate //编辑班次
} from "../../services/api";

const FormItem = Form.Item;
const { confirm } = Modal;
const format = "HH:mm";
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 7 }
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
    md: { span: 10 }
  }
};
const initFormData = {
  canEdit: true,
  shiftType: "", //班次类型
  effectRule: "", //生效规则
  shiftId: "", //班次ID
  shiftName: "", //班次名称
  commutTimes: 1, //每天上下班次数
  absentLow: 0, //旷工时间下限
  absentSwitch: "0", //旷工校验开关
  clockWorkLimit: 0, //上下班打卡时限
  clockLimitSwitch: "0", //上下班打卡时限开关
  permitLateUp: 0, //允许迟到时间上限
  permitLateSwitch: "0", //允许迟到校验开关
  shiftRuleList: [
    {
      startWorkTime: moment(`08:00`, format),
      endWorkTime: moment(`11:00`, format),
      isStartNextDay: "0",
      isEndNextDay: "0"
    }
  ]
};
@connect(state => ({
  profile: state.profile
}))
@Form.create()
export default class NewShift extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open3: false, //新增班次
      visible: false, //添加地点
      shiftType: this.props.location.pathname.slice(-1), //1  考勤班次 2  任务班次
      taskComShiftPage: [],
      formData: { ...initFormData },
      pagenav: {
        pageNumber: 1,
        pageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `总共 ${total} 条`,
        onShowSizeChange: (pageNumber, pageSize) => {
          const pagenav = Object.assign({}, this.state.pagenav);
          pagenav.pageNumber = pageNumber;
          pagenav.pageSize = pageSize;
          this.setState({ pagenav });
          setTimeout(() => {
            this.taskComShiftPage();
          });
        },
        onChange: (page, pageSize) => {
          const pagenav = Object.assign({}, this.state.pagenav);
          pagenav.pageNumber = page;
          pagenav.pageSize = pageSize;
          this.setState({ pagenav });
          setTimeout(() => {
            this.taskComShiftPage();
          });
        },
        total: 0
      }
    };
  }

  componentDidMount() {
    // window.initialize = this.initializeMap;
    this.taskComShiftPage();
  }

  //班次管理-班次删除并删除班次的考勤时间安排
  taskComShiftDelete = (shiftId, shiftType) => {
    taskComShiftDelete({ shiftId, shiftType })
      .then(data => {
        console.log(data, "班次管理-班次删除并删除班次的考勤时间安排-data");
        this.taskComShiftPage();
      })
      .catch(err => {
        console.log(err, "班次管理-班次删除并删除班次的考勤时间安排-err");
      });
  };
  //添加班次
  taskComShiftInsert = obj => {
    taskComShiftInsert(obj)
      .then(data => {
        console.log(data, "添加班次-data");
        this.setState({ open3: false });
        this.taskComShiftPage();
      })
      .catch(err => {
        console.log(err, "添加班次-err");
      });
  };
  //编辑班次
  taskComShiftUpdate = obj => {
    taskComShiftUpdate(obj)
      .then(data => {
        console.log(data, "编辑班次-data");
        this.setState({ open3: false });
        this.taskComShiftPage();
      })
      .catch(err => {
        console.log(err, "编辑班次-err");
      });
  };
  //根据id获取班次
  taskComShiftGet = shiftId => {
    taskComShiftGet({ shiftId })
      .then(response => {
        console.log(response, "根据id获取班次-response");
        const { data } = response;
        const formData = {};
        const {
          shiftType, //班次类型
          effectRule, //生效规则
          shiftName, //班次名称
          commutTimes, //每天上下班次数
          absentLow, //旷工时间下限
          absentSwitch, //旷工校验开关
          clockWorkLimit, //上下班打卡时限
          clockLimitSwitch, //上下班打卡时限开关
          permitLateUp, //允许迟到时间上限
          permitLateSwitch, //允许迟到校验开关
          shiftRuleList,
          canEdit,
          shiftMessage
        } = data;
        if (!canEdit) {
          message.error(shiftMessage);
        }
        const newshiftRuleList = shiftRuleList.map(val => {
          val["startWorkTime"] = moment(val["startWorkTime"], format);
          val["endWorkTime"] = moment(val["endWorkTime"], format);
          return val;
        });
        const { setFieldsValue } = this.props.form;
        formData["shiftType"] = shiftType;
        formData["effectRule"] = effectRule;
        formData["shiftId"] = shiftId;
        formData["shiftName"] = shiftName;
        formData["commutTimes"] = commutTimes;
        formData["absentLow"] = absentLow;
        formData["absentSwitch"] = absentSwitch;
        formData["clockWorkLimit"] = clockWorkLimit;
        formData["clockLimitSwitch"] = clockLimitSwitch;
        formData["permitLateUp"] = permitLateUp;
        formData["permitLateSwitch"] = permitLateSwitch;
        formData["shiftRuleList"] = newshiftRuleList;
        formData["canEdit"] = canEdit;
        formData["shiftMessage"] = shiftMessage;
        this.setState({ formData });
        setFieldsValue({ shiftName, commutTimes: shiftRuleList.length });
      })
      .catch(err => {
        console.log(err, "根据id获取班次-err");
      });
  };
  //获取班次分页查询
  taskComShiftPage = () => {
    const { shiftType } = this.state;
    const { pageSize, pageNumber } = this.state.pagenav;
    taskComShiftPage({
      pageSize,
      pageNumber,
      shiftType
    })
      .then(response => {
        console.log(response, "taskComShiftPage-获取班次分页查询-response");
        const pagenav = Object.assign({}, this.state.pagenav);
        let { data } = response.data;
        pagenav.total = response.data.total;
        data = data.map((val, i) => {
          val.key = i;
          return val;
        });
        if (data.length > 0) {
          this.setState({
            taskComShiftPage: data,
            pagenav
          });
        } else {
          this.setState({});
        }
      })
      .catch(err => {
        console.log(err, "taskComShiftPage-获取班次分页查询-err");
      });
  };

  /******************************相关事件******************************/

  //表单提交
  handleSubmit = () => {
    this.props.form.validateFields((err, values) => {
      console.log(values, this.state, "values-handleSubmit");
      const { shiftType, formData } = this.state;
      const {
        shiftId,
        shiftName,
        absentLow,
        absentSwitch,
        clockWorkLimit,
        clockLimitSwitch,
        permitLateUp,
        permitLateSwitch,
        shiftRuleList,
        shiftMessage,
        canEdit
      } = formData;
      if (!canEdit) {
        message.error(shiftMessage);
        return;
      }
      //时间改变--------------------------------------

      const len = shiftRuleList.length;
      const ret = shiftRuleList.some((val1, i) => {
        const preStart =
          shiftRuleList[i]["startWorkTime"].hour() * 60 +
          shiftRuleList[i]["startWorkTime"].minute();
        const preEnd =
          shiftRuleList[i]["endWorkTime"].hour() * 60 +
          shiftRuleList[i]["endWorkTime"].minute();

        //设置为次日 注：只能是最后一轮的下班时间才能是次日
        if (i === len - 1 && preStart > preEnd) {
          //总时间不能大于24小时要求最后一轮的结束时间不能大作第一轮的开始时间
          const firstStart = shiftRuleList[0]["startWorkTime"];
          const firstSartMinute = firstStart.hour() * 60 + firstStart.minute();

          if (firstSartMinute <= preEnd) {
            message.error("总时间需控制在24小时内，请重新选择。");
            return true;
          } else {
            shiftRuleList[i]["isEndNextDay"] = "1";
          }
        }
        //设置为当日
        if (i === len - 1 && preStart < preEnd) {
          shiftRuleList[i]["isEndNextDay"] = "0";
        }

        if (len === 1 && preStart === preEnd) {
          message.error("上下班时间不能一样");
          return true;
        }

        //处理大于两个班次的
        if (len === 1 || i >= len - 2) {
          return false;
        }

        const nextStart =
          shiftRuleList[i + 1]["startWorkTime"].hour() * 60 +
          shiftRuleList[i + 1]["startWorkTime"].minute();

        //如果不是最后一轮开始时间不能大于结束时间
        if (preStart >= preEnd) {
          message.error("下班时间需晚于上班时间，请重新选择。");
          return true;
        }

        //前一轮的下班时间要小于后一轮的上班时间
        if (preEnd >= nextStart) {
          message.error("上一班次的下班时间要小于下一班次的上班时间");
          return true;
        }
        return false;
      });

      if (ret) {
        return false;
      }

      //附加设置--------------------------------------------------------
      const times = this.computeTime();
      const minTime = Math.min.apply(null, times);
      if (
        (!_.isInteger(absentLow) && absentSwitch) ||
        (!_.isInteger(clockWorkLimit) && clockLimitSwitch) ||
        (!_.isInteger(permitLateUp) && permitLateSwitch)
      ) {
        message.error("允许迟到、分钟只能是正整数");
        return;
      }

      if (
        absentLow <= permitLateUp &&
        absentSwitch === "1" &&
        permitLateSwitch === "1"
      ) {
        message.error("允许旷工时间需大于允许迟到时间，请重新输入");
        return;
      }

      if (
        clockWorkLimit >= minTime ||
        absentLow >= minTime ||
        permitLateUp >= minTime
      ) {
        message.error(
          "打卡时限、旷工、迟到时间不得超过每轮班次的间隔时间，请重新输入"
        );
        return;
      }

      //转换时间格式
      const newshiftRuleList = shiftRuleList.map(val => {
        const obj = {};
        obj["isStartNextDay"] = val["isStartNextDay"];
        obj["isEndNextDay"] = val["isEndNextDay"];
        const endhour = val["endWorkTime"].hour();
        const starthour = val["startWorkTime"].hour();
        const ends = val["endWorkTime"]["_i"].split(":");
        const starts = val["startWorkTime"]["_i"].split(":");
        obj["endWorkTime"] =
          endhour < 10
            ? `0${endhour}:${val["endWorkTime"]["_i"].split(":")[1]}`
            : `${ends[0]}:${ends[1]}`;
        obj["startWorkTime"] =
          starthour < 10
            ? `0${starthour}:${val["startWorkTime"]["_i"].split(":")[1]}`
            : `${starts[0]}:${starts[1]}`;

        console.log(obj);
        return obj;
      });

      const obj = {
        shiftId,
        shiftType,
        shiftName,
        commutTimes: shiftRuleList.length,
        absentLow,
        absentSwitch,
        clockWorkLimit,
        clockLimitSwitch,
        permitLateUp,
        permitLateSwitch,
        shiftRuleJson: JSON.stringify(newshiftRuleList)
      };
      if (!err) {
        console.log(obj, "obj");
        if (shiftId) {
          //编缉
          confirm({
            title: "选择班次生效时间",
            content: "若选择“立即生效”，今天相关的考勤组记录会重新核算",
            okText: "立即生效",
            onOk: () => {
              obj.effectRule = "1";
              this.taskComShiftUpdate(obj);
            },
            cancelText: "明日生效",
            onCancel: () => {
              obj.effectRule = "2";
              this.taskComShiftUpdate(obj);
            }
          });
        } else {
          //编缉更新
          this.taskComShiftInsert(obj);
        }
      }
    });
  };

  //迟到单选框
  lateCheckChange = (filed, filed1, e) => {
    console.log(filed, filed1, e.target.checked, " e.target.checked");
    const { formData } = this.state;
    if (!e.target.checked) {
      formData[filed1] = 0;
    }
    formData[filed] = e.target.checked ? "1" : "0";
    this.setState({ formData });
  };

  //附加设置
  inputChange = (file, val) => {
    const { formData } = this.state;

    formData[file] = val;
    this.setState({ formData });
  };

  /******************************render******************************/

  renderTable = () => {
    //table 编辑
    const tableEditor = record => {
      const { formData } = this.state;
      formData["shiftId"] = record.shiftId;
      this.setState({ open3: true, formData });
      this.taskComShiftGet(record.shiftId);
    };

    const columns = [
      {
        title: "班次名称",
        dataIndex: "shiftName",
        key: "1",
        width: 200
      },
      {
        title: "班次类型",
        key: "2",
        dataIndex: "shiftType",
        render: (text, record) => {
          return (
            <div>
              {record.shiftType === "1" && "考勤班次"}
              {record.shiftType === "2" && "任务班次"}
            </div>
          );
        },
        width: 100
      },
      {
        title: "考勤时间安排",
        dataIndex: "shiftRuleTime",
        key: "3",
        render: (text, record) => {
          return (
            <div dangerouslySetInnerHTML={{ __html: record.shiftRuleTime }} />
          );
        }
      },
      {
        title: "操作",
        dataIndex: "d",
        key: "4",
        width: 150,
        render: (text, record) => {
          return (
            <div style={{ color: "rgba(15,113,255,1)" }}>
              <span
                style={{ marginRight: 8 }}
                onClick={tableEditor.bind(this, record)}
              >
                编辑
              </span>
              <span
                onClick={() => {
                  confirm({
                    content: (
                      <div>
                        删除的班次不可恢复！确认删除"<em
                          style={{ color: "#F5222E" }}
                        >
                          {record.shiftName}
                        </em>"
                      </div>
                    ),
                    okText: "删除",
                    onOk: () => {
                      this.taskComShiftDelete(record.shiftId, record.shiftType);
                    },
                    cancelText: "取消",
                    onCancel() {
                      console.log("Cancel");
                    }
                  });
                }}
              >
                删除
              </span>
            </div>
          );
        }
      }
    ];

    return (
      <Table
        pagination={this.state.pagenav}
        dataSource={this.state.taskComShiftPage}
        columns={columns}
        // loading={this.state.loading}
      />
    );
  };

  computeTime = () => {
    const { formData } = this.state;
    const { shiftRuleList } = formData;
    const times = [];
    shiftRuleList.forEach(val => {
      const { endWorkTime, startWorkTime } = val;
      //console.log(endWorkTime, startWorkTime, "shiftRuleList.forEach");
      const sartHour = startWorkTime.hour();
      const endHour = endWorkTime.hour();
      const startMinute = startWorkTime.minute();
      const endMinute = endWorkTime.minute();
      if (
        sartHour < endHour ||
        (sartHour === endHour && startMinute < endMinute)
      ) {
        times.push((endHour - sartHour) * 60 + endMinute - startMinute);
      } else {
        times.push((24 - sartHour + endHour) * 60 + endMinute - startMinute);
      }
    });

    return times;
  };

  //选择时间的时候
  timeChange = (time, i, file) => {
    const { formData } = this.state;
    const shiftRuleList = formData.shiftRuleList.map(val => {
      const obj = {};
      obj.startWorkTime = val.startWorkTime;
      obj.endWorkTime = val.endWorkTime;
      obj.isStartNextDay = val.isStartNextDay;
      obj.isEndNextDay = val.isEndNextDay;
      return obj;
    });

    shiftRuleList[i][file] = moment(time, format);
    formData["shiftRuleList"] = shiftRuleList;
    this.setState({ formData });

    //设置为次日 注：只能是最后一轮的下班时间才能是次日
    const len = shiftRuleList.length;
    const start =
      shiftRuleList[i]["startWorkTime"].hour() * 60 +
      shiftRuleList[i]["startWorkTime"].minute();
    const end =
      shiftRuleList[i]["endWorkTime"].hour() * 60 +
      shiftRuleList[i]["endWorkTime"].minute();
    const firstStart = shiftRuleList[0]["startWorkTime"];
    const firstSartMinute = firstStart.hour() * 60 + firstStart.minute();
    //设置为次日1
    console.log(
      i === len - 1,
      start,
      end,
      firstSartMinute,
      end,
      "i === len - 1 && start > end && firstSartMinute > end"
    );
    if (i === len - 1 && start > end && firstSartMinute > end) {
      shiftRuleList[i]["isEndNextDay"] = "1";
    }
    //设置为当日0
    if (i === len - 1 && start < end) {
      shiftRuleList[i]["isEndNextDay"] = "0";
    }
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const formData = { ...this.state.formData };

    const {
      shiftId,
      shiftName, //班次名称
      commutTimes, //每天上下班次数
      absentLow, //旷工时间下限
      absentSwitch, //旷工校验开关
      clockWorkLimit, //严重迟到时间下限
      clockLimitSwitch, //严重迟到校验开关
      permitLateUp, //允许迟到时间上限
      permitLateSwitch //允许迟到校验开关
    } = this.state.formData;
    const { shiftRuleList } = this.state.formData;

    return (
      <div className="CreateTask CreateThiftManagement">
        <div className="bz-title">班次管理</div>
        <Button
          onClick={() => {
            const { setFieldsValue } = this.props.form;
            setFieldsValue({ shiftName: "", commutTimes: 1 });
            this.setState({
              open3: true,
              formData: {
                canEdit: true,
                shiftType: "", //班次类型
                effectRule: "", //生效规则
                shiftId: "", //班次ID
                shiftName: "", //班次名称
                commutTimes: 1, //每天上下班次数
                absentLow: 0, //旷工时间下限
                absentSwitch: "0", //旷工校验开关
                clockWorkLimit: 0, //上下班打卡时限
                clockLimitSwitch: "0", //上下班打卡时限开关
                permitLateUp: 0, //允许迟到时间上限
                permitLateSwitch: "0", //允许迟到校验开关
                shiftRuleList: [
                  {
                    startWorkTime: moment(`08:00`, format),
                    endWorkTime: moment(`11:00`, format),
                    isStartNextDay: "0",
                    isEndNextDay: "0"
                  }
                ]
              }
            });
          }}
          className="new-btn"
          type="primary"
        >
          新增班次
        </Button>
        {/*<Table pagination={this.state.pagenav} dataSource={this.dataSource} columns={this.columns}/>*/}

        {this.renderTable()}

        {/*  选择班次--新增班次 */}
        <Drawer
          right
          open={this.state.open3}
          width={600}
          className="drawer-box"
          noTouchOpen
          noTouchClose
          zIndex={2}
          onChange={open3 => {
            this.setState({ open3 });
          }}
        >
          <div className="drawer task-drawer">
            <div className="drawer-header">
              {shiftId !== "" ? "编辑班次" : "新增班次"}
            </div>
            <div className="drawer-content">
              <Form onSubmit={this.handleSubmit} style={{ marginTop: 24 }}>
                <FormItem {...formItemLayout} label="班次名称">
                  {getFieldDecorator("shiftName", {
                    rules: [
                      {
                        required: true,
                        message: "请输入"
                      },
                      { max: 15, message: "限制15个字" }
                    ],
                    initialValue: shiftName || null
                  })(
                    <Input
                      placeholder="请输入班次名称"
                      onChange={e => {
                        formData["shiftName"] = e.target.value;
                        this.setState({ formData });
                      }}
                    />
                  )}
                </FormItem>
                <FormItem {...formItemLayout} label="一天上下班次数">
                  {getFieldDecorator("commutTimes", {
                    rules: [{ required: true, message: "请输入" }],
                    initialValue: commutTimes || null
                  })(
                    <InputNumber
                      onChange={num => {
                        let val = num;
                        const { setFieldsValue } = this.props.form;
                        const shiftArr = [];
                        if (val > 5) {
                          val = 5;
                        }
                        console.log(_.isInteger(val), "_.isInteger(val)");
                        if (val <= 0 || val === "") {
                          val = 1;
                          window.setTimeout(() =>
                            setFieldsValue({ commutTimes: 1 })
                          );
                        }
                        if (!_.isInteger(val)) {
                          val = 1;
                        }

                        for (let i = 0; i < val; i++) {
                          const startWorkTime = 8 + (i * 4 - 1);
                          let endWorkTime = startWorkTime + 3;
                          if (endWorkTime > 24) {
                            endWorkTime -= 24;
                            shiftArr.push({
                              isEndNextDay: "1",
                              isStartNextDay: "0",
                              startWorkTime: moment(
                                `${startWorkTime}:00`,
                                format
                              ),
                              endWorkTime: moment(`${endWorkTime}:00`, format)
                            });
                          } else {
                            shiftArr.push({
                              isEndNextDay: "0",
                              isStartNextDay: "0",
                              startWorkTime: moment(
                                `${startWorkTime}:00`,
                                format
                              ),
                              endWorkTime: moment(`${endWorkTime}:00`, format)
                            });
                          }
                        }
                        console.log(shiftArr, "shiftRuleList-InputNumber1");
                        const newformData = { ...formData };
                        newformData.commutTimes = val;
                        newformData.shiftRuleList = shiftArr;
                        this.setState({ formData: newformData });
                      }}
                      max={5}
                      min={1}
                      step={1}
                      addonAfter="次"
                    />
                  )}
                </FormItem>
                {shiftRuleList.map((val, i) => {
                  return (
                    <div key={i} className="formitem">
                      <div className="l">第{i + 1}轮班次：</div>
                      <div className="c">
                        <Timeline>
                          <Timeline.Item color="green">
                            <div className="block">test</div>
                          </Timeline.Item>
                          <Timeline.Item color="orange">
                            <div className="block">test</div>
                          </Timeline.Item>
                        </Timeline>
                      </div>
                      <div className="r">
                        <FormItem
                          labelCol={{ span: 4 }}
                          wrapperCol={{ span: 10 }}
                          label="上班:"
                        >
                          <TimePicker
                            allowEmpty={false}
                            value={val.startWorkTime}
                            onChange={(value, time) => {
                              this.timeChange(time, i, "startWorkTime");
                            }}
                            className="task-TimePicker"
                            format={format}
                          />
                        </FormItem>
                        <FormItem
                          labelCol={{ span: 4 }}
                          wrapperCol={{ span: 10 }}
                          label="下班:"
                          style={{ marginTop: 10 }}
                        >
                          <TimePicker
                            allowEmpty={false}
                            value={val.endWorkTime}
                            onChange={(value, time) => {
                              this.timeChange(time, i, "endWorkTime");
                            }}
                            className="task-TimePicker"
                            format={format}
                          />
                          {shiftRuleList[i]["isEndNextDay"] === "1" ? (
                            <span style={{ color: "red" }}>次日</span>
                          ) : null}
                        </FormItem>
                      </div>
                    </div>
                  );
                })}

                {(() => {
                  const times = this.computeTime();
                  if (!times.length) {
                    return null;
                  }

                  const allminute = times.reduce((a, b) => a + b);
                  const houre = parseInt(allminute / 60, 10);
                  const minute = allminute % 60;
                  return (
                    <div className="help" style={{ paddingLeft: 182 }}>
                      合计工作时长 <span>{houre}</span>小时<span>{minute}</span>分钟
                    </div>
                  );
                })()}

                <div
                  style={{ borderBottom: "1px solid#E9E9E9", margin: "24px" }}
                />

                <FormItem
                  {...{
                    labelCol: {
                      xs: { span: 24 },
                      sm: { span: 7 }
                    },
                    wrapperCol: {
                      xs: { span: 24 },
                      sm: { span: 12 },
                      md: { span: 16 }
                    }
                  }}
                  label="附加设置"
                >
                  <Row style={{ marginBottom: 24 }}>
                    <Checkbox
                      checked={permitLateSwitch === "1"}
                      onChange={val => {
                        this.lateCheckChange(
                          "permitLateSwitch",
                          "permitLateUp",
                          val
                        );
                      }}
                      name="permitLateSwitch"
                    >
                      允许迟到
                    </Checkbox>
                    <InputNumber
                      style={{ width: 88 }}
                      min={0}
                      value={permitLateUp}
                      disabled={permitLateSwitch !== "1"}
                      onChange={val => {
                        this.inputChange("permitLateUp", val);
                      }}
                    />分钟
                  </Row>
                  <Row style={{ marginBottom: 24 }}>
                    <Checkbox
                      checked={absentSwitch === "1"}
                      onChange={val => {
                        this.lateCheckChange("absentSwitch", "absentLow", val);
                      }}
                      name="absentSwitch"
                    >
                      迟到超过
                    </Checkbox>
                    <InputNumber
                      style={{ width: 88 }}
                      min={0}
                      disabled={absentSwitch !== "1"}
                      value={absentLow}
                      onChange={val => {
                        this.inputChange("absentLow", val);
                      }}
                    />分钟
                    <span style={{ color: "#F5222E" }}>(视为旷工)</span>
                  </Row>
                  <Row style={{ marginBottom: 24 }}>
                    <Checkbox
                      checked={clockLimitSwitch === "1"}
                      onChange={val => {
                        this.lateCheckChange(
                          "clockLimitSwitch",
                          "clockWorkLimit",
                          val
                        );
                      }}
                      name="clockLimitSwitch"
                    >
                      打卡时限
                    </Checkbox>
                    <InputNumber
                      style={{ width: 88 }}
                      min={0}
                      disabled={clockLimitSwitch !== "1"}
                      value={clockWorkLimit}
                      onChange={val => {
                        if (val === "" || val < 0) {
                          val = 0;
                        }
                        this.inputChange("clockWorkLimit", val);
                      }}
                    />分钟
                    <span style={{ color: "#FFAA00" }}>
                      （上班前和下班后的打卡时间限制，超过视为漏打卡）
                    </span>
                  </Row>
                </FormItem>
              </Form>
            </div>
            <div className="drawer-footer">
              <Button
                onClick={() => {
                  confirm({
                    content: "您确定取消本次操作？",
                    okText: "继续",
                    onOk: () => {},
                    cancelText: "取消",
                    onCancel: () => {
                      this.setState({ open3: false });
                    }
                  });
                }}
              >
                取消
              </Button>

              <Button onClick={this.handleSubmit} type="primary">
                {shiftId !== "" ? "修改班次" : "保存班次"}
              </Button>
            </div>
          </div>
        </Drawer>

        <Modal
          title="选择班次生效时间"
          visible={this.state.visible}
          okText="立即生效"
          cancelText="明日生效"
          onOk={() => {
            this.setState({ visible: false });
          }}
          onCancel={() => {
            this.setState({ visible: false });
          }}
          wrapClassName="thiftModal"
        >
          <Icon type="exclamation-circle" />若选择“立即生效”，今天相关的任务记录会重新核算！
        </Modal>
      </div>
    );
  }
}
